<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#tab{
		width: 600px;
		height: 400px;
		border: 3px solid blue;
		margin: 0 auto;
		font-family: 微软雅黑;
		position: relative;
	}
	#tab ul li{
		width: 150px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		list-style: none;
		float: left;
		margin: 0 10px;
		font-size: 30px;
		color: white;
	}
	#tab .news{
		width: 560px;
		height: 300px;
		position: absolute;
		top: 80px;
		left: 20px;
		text-align: center;
		line-height: 300px;
		font-size: 80px;
		color: white;
		font-weight: 800;
		display: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*$(function(){
	$('#tab ul li').click(function(){
		// var index = $(this).index();
		// $('#tab .news').eq(index).show();
		// $('#tab .news').eq(index).siblings('.news').hide();
		$('#tab .news').eq($(this).index()).show().siblings('.news').hide();
	})
})*/
</script>
<script type="text/javascript">
window.onload = function(){
	var lis = document.getElementById('tab').getElementsByTagName('li');
	var divs = document.getElementById('tab').getElementsByClassName('news');
	for(var i=0;i<lis.length;i++){
		lis[i].onclick = function(e){
			var ev = window.event || e;
			var curObj = ev.srcElement || ev.target;//获得点击的事件源对象
			for(var j = 0;j<lis.length;j++){//获得点击的li是几号
				if(curObj==lis[j]){
					// alert(j)
					index = j;
				}
			}
			for(var x=0;x<divs.length;x++){//循环内容div，控制显示隐藏
				if(x==index){
					divs[x].style.display = 'block';
				}else{
					divs[x].style.display = 'none';
				}
			}

		}
	}
}
</script>
</head>

<body>
	<div id="tab">
		<ul>
			<li style="background:green;">新闻</li>
			<li style="background:purple;">娱乐</li>
			<li style="background:orange;">体育</li>
		</ul>
		<div class="news" style="background:green;display:block;">新闻内容</div>
		<div class="news" style="background:purple;">娱乐内容</div>
		<div class="news" style="background:orange;">体育内容</div>
	</div>
</body>
</html>
